<template>
  <view class="container">
    <!-- 返回导航栏 -->
    <view class="nav-bar">
      <text class="back-icon" @click="goBack">返回</text>
      <text class="title">通知设置</text>
    </view>

    <view class="settings-list">
      <!-- 提醒方式设置 -->
      <view class="settings-group">
        <text class="group-title">提醒方式</text>
        <view class="settings-item">
          <text class="item-label">震动提醒</text>
          <switch :checked="settings.vibrate" @change="toggleVibrate" color="#018d71" />
        </view>
        <view class="settings-item">
          <text class="item-label">声音提醒</text>
          <switch :checked="settings.sound" @change="toggleSound" color="#018d71" />
        </view>
      </view>

      <!-- 提醒时间设置 -->
      <view class="settings-group">
        <text class="group-title">提醒时间</text>
        <view class="settings-item">
          <text class="item-label">提前提醒时间</text>
          <picker :value="timeIndex" :range="reminderTimes" @change="handleTimeChange">
            <text class="picker-text">{{ reminderTimes[timeIndex] }}</text>
          </picker>
        </view>
      </view>

      <!-- 测试提醒按钮 -->
      <button class="test-button" @click="testNotification">测试提醒</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// 设置状态
const settings = ref({
  vibrate: true,
  sound: true,
  advanceTime: 5 // 默认提前5分钟提醒
})

// 提醒时间选项
const reminderTimes = ['提前5分钟', '提前10分钟', '提前15分钟', '提前30分钟']
const timeIndex = ref(0)

// 切换震动提醒
const toggleVibrate = (e: any) => {
  settings.value.vibrate = e.detail.value
  saveSettings()
}

// 切换声音提醒
const toggleSound = (e: any) => {
  settings.value.sound = e.detail.value
  saveSettings()
}

// 修改提醒时间
const handleTimeChange = (e: any) => {
  timeIndex.value = e.detail.value
  settings.value.advanceTime = [5, 10, 15, 30][timeIndex.value]
  saveSettings()
}

// 保存设置
const saveSettings = () => {
  uni.setStorageSync('notification_settings', settings.value)
  uni.showToast({
    title: '设置已保存',
    icon: 'success'
  })
}

// 测试提醒
const testNotification = () => {
  if (settings.value.sound) {
    // 播放提示音
    const audio = uni.createInnerAudioContext()
    audio.src = '/static/notification.mp3'
    audio.play()
  }

  if (settings.value.vibrate) {
    // 触发震动
    uni.vibrateShort()
  }

  uni.showToast({
    title: '提醒测试成功',
    icon: 'success'
  })
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f8f8f8;
}

.nav-bar {
  display: flex;
  align-items: center;
  padding: 20rpx 40rpx;
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;
  
  .back-icon {
    font-size: 28rpx;
    color: #333333;
  }
  
  .title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    margin-right: 56rpx;
  }
}

.settings-list {
  padding: 40rpx;
}

.settings-group {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
  
  .group-title {
    font-size: 28rpx;
    color: #999999;
    margin-bottom: 20rpx;
  }
}

.settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
  
  .item-label {
    font-size: 30rpx;
    color: #333333;
  }
  
  .picker-text {
    font-size: 30rpx;
    color: #018d71;
  }
}

.test-button {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: #018d71;
  color: #ffffff;
  border-radius: 44rpx;
  font-size: 32rpx;
  margin-top: 60rpx;
}
</style>